<template>
  <div class="container">
    {{ sum }}
    {{ messgae }}
    {{ person }}
  </div>
  <button @click="changeSUM">改变sum</button>
  <button @click="changeMessage">改变message</button>
  <button @click="changePerson">改变person</button>
</template>

<script>
import {reactive, ref, watch, watchEffect} from "vue";//引入ref实现响应式
export default {
  name: 'App',
  components: {},
  setup() {
    let sum = ref(0)
    let messgae = ref('hello')
    let person = reactive({
      name: 'Jack',
      age: 18,
      job: {
        type: '前端工程师',
        salary: '20K'
      }
    })

    function changeSUM() {
      sum.value += 1
    }

    function changeMessage() {
      messgae.value = 'no hello'
    }

    function changePerson() {
      person.name = '曾宇杰'
      person.job.type = 'UI'
      person.job.salary = '100k'

    }

    //情况五：监视reactive所定义的响应式数据的某些属性,得写成函数
    watch([() => person.name, () => person.age], (newVal, oldVal) => {
      console.log('person中的name和age变化了', newVal[0], oldVal[0]);
    })
    //不用指定监视属性,监视的回调函数用到哪个函数,那就监视哪个属性
    watchEffect(() => {
      console.log('watchEffect所指定的回调函数执行了')
      const x1 = sum.value
      console.log(x1)
    })

    return {
      sum, messgae, person, changeSUM, changeMessage, changePerson
    }
  },


}
</script>

<style>
.container {
  width: 200px;
  background-color: gray;
  margin: auto;
}
</style>
